@import './vars.css';

.fade-in-height-expand {
  &-leave-from,
  &-enter-to {
    opacity: 1;
  }

  &-leave-to,
  &-enter-from {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    opacity: 0 !important;
  }

  &-leave-active {
    overflow: hidden !important;
    transition:
      max-height var(--transition-slow-duration) var(--transition-ease-in-out),
      opacity var(--transition-leave-duration) var(--transition-ease-out),
      margin-top var(--transition-slow-duration) var(--transition-ease-in-out),
      margin-bottom var(--transition-slow-duration)
        var(--transition-ease-in-out),
      padding-top var(--transition-slow-duration) var(--transition-ease-in-out),
      padding-bottom var(--transition-slow-duration)
        var(--transition-ease-in-out) !important;
  }

  &-enter-active {
    overflow: hidden !important;
    transition:
      max-height var(--transition-slow-duration) var(--transition-ease-in-out),
      opacity var(--transition-enter-duration) var(--transition-ease-in),
      margin-top var(--transition-slow-duration) var(--transition-ease-in-out),
      margin-bottom var(--transition-slow-duration)
        var(--transition-ease-in-out),
      padding-top var(--transition-slow-duration) var(--transition-ease-in-out),
      padding-bottom var(--transition-slow-duration)
        var(--transition-ease-in-out) !important;
  }
}
